<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small" v-if="editId"><i class="el-icon-back"></i>返回列表
      </el-button>
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" label-width="140px">
            <el-form-item label="通知标题:" prop="title">
              <el-input v-model="infoForm.title" placeholder="填写通知标题" v-if="!editId"></el-input>
              <p v-else>{{ infoForm.title }}</p>
            </el-form-item>
            <el-form-item label="要求送达时间:">
              <el-date-picker type="date"
                              placeholder="要求送达时间"
                              v-model="infoForm.time"
                              :picker-options="pickerOptions1"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd" v-if="!editId"></el-date-picker>
              <p v-else>{{ infoForm.time }}</p>
            </el-form-item>
            <el-form-item label="通知范围:">
              <div v-if="!editId">
                <el-radio-group v-model="infoForm.type">
                  <el-radio label="0">全校</el-radio>
                  <el-radio label="1">特定年段</el-radio>
                  <el-radio label="2">特定班级</el-radio>
                </el-radio-group>
              </div>
              <div v-else>
                <span v-if="infoForm.type==0">全校</span>
                <span v-if="infoForm.type==1">特定年段(<span v-for="(item,index) in editsection_id"
                                                         :key="index">{{ item.section_name }}</span>)</span>
                <span v-if="infoForm.type==2" style="display: block;">
                  特定班级(<span v-for="(item,index) in editClass_id" :key="index">{{ item.class_name }}<span
                  v-if="editBody.student_id">,特定学生</span></span>)
                </span>
                <span v-if="infoForm.type==2&&editBody.student_id" style="display: block;">
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in editBody.student_id"
                    class="mr-10"
                  >{{ tag.name }}
                  </el-tag>
                </span>
              </div>
            </el-form-item>
            <div v-if="!editId">
              <el-form-item label="请选择年段:" v-if="infoForm.type==1">
                <div v-if="!editId">
                  <el-select v-model="value1" multiple placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in sectionList"
                      :key="item.id"
                      :label="item.section_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>
                  <span
                    v-for="(item,index) in editsection_id">{{
                      oldsection[editsection_id[index]].section_name
                    }}{{ index + 1 !== editsection_id.length ? ',' : '' }}</span>
                </div>
              </el-form-item>
              <el-form-item label="请选择通知班级:" v-if="infoForm.type==2">
                <div v-if="!editId">
                  <!--                  <sectionInput @changeSection="changeSection" :sectionId.sync="infoForm.section_id"></sectionInput>-->
                  <!--                  <classInput @changeClass="changeClass" :sectionId.sync="infoForm.section_id"-->
                  <!--                              :classId.sync="infoForm.class_id"></classInput>-->
                  <el-button type="primary" @click="chooseStudent(1)" size="small" plain>选择班级</el-button>
                  <div>
                    <el-tag
                      :key="tag.id"
                      v-for="(tag,index) in dynamicClassTags"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(index,1)"
                      class="mr-10"
                    >{{ tag.class_name }}
                    </el-tag>
                  </div>
                </div>
                <div v-else>
                  <span
                    v-for="(item,index) in editClass_id">{{
                      oldClass[editClass_id[index]].section_id
                    }}-{{ oldClass[editClass_id[index]].class_name }}{{
                      index + 1 !== editClass_id.length ? ',' : ''
                    }}</span>
                </div>
              </el-form-item>
              <!--v-if="infoForm.class_id"-->
              <el-form-item label="是否选择特定学生:" v-if="infoForm.type==2">
                <el-radio-group v-model="studentRadio">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择特定学生:" v-if="studentRadio==1">
                <el-button type="primary" @click="chooseStudent(2)" class="mb-10" size="small">选择特定学生</el-button>
                <div>
                  <el-tag
                    :key="tag.id"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,2)"
                    class="mr-10"
                  >{{ tag.name }}
                  </el-tag>
                </div>
              </el-form-item>
            </div>
            <el-form-item label="通知内容:" prop="title">
              <div class="edit_container" v-if="!editId">
                <quill-editor v-model="infoForm.body"
                              ref="myQuillEditor"
                              class="editer"
                              :options="editorOption" @ready="onEditorReady($event)" placeholder="填写通知内容">
                </quill-editor>
              </div>
              <div v-else v-html="infoForm.body">
              </div>
            </el-form-item>
            <el-form-item label="内容预览:" v-if="infoForm.body">
              <el-button @click="priveContent">查看</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="!editId">确认提交</el-button>
              <el-button @click="backlist" v-else>返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--    <studentMultiple :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"-->
    <!--                     :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></studentMultiple>-->
    <MultipleStudentModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleStudentModle>
    <!--    选择班级-->
    <MultipleClassModle :visible.sync="classVisible" @studentFn="studentFn"
                        :dynamicTagsArray="dynamicTagsArray"></MultipleClassModle>
    <el-dialog
      title="内容预览"
      :visible.sync="contentVisible"
      width="60%">
      <div style="max-height: 400px;overflow-y: auto;">
        <div v-html="infoForm.body" class="ql-editor"></div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="contentVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {yeartime} from '@/assets/js/common'
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import quillConfig from '@/assets/js/quill-config.js'
import studentMultiple from '@/components/dialog/studentMultiple.vue'
import {pagination, tableoption} from '@/utils/util.js'
import classInput from '@/components/template/classInput.vue'
import sectionInput from '@/components/template/sectionInput.vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import api from '@/utils/api.js'

export default {
  components: {
    // 使用编辑器
    quillEditor,
    classInput,
    sectionInput,
    studentMultiple
  },
  data() {
    return {
      classVisible: false,
      // 限制时间选择
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      infoForm: {
        title: '',
        body: '',
        type: '0',
        class_id: '',
        section_id: '',
        time: yeartime(new Date()),
        student_id: 0
      },
      contentVisible: false,
      editorOption: quillConfig,
      // 表单验证
      rules: {
        title: [
          {required: true, message: '填写通知标题', trigger: 'blur'}
        ],
        body: [
          {required: true, message: '填写通知内容', trigger: 'blur'}
        ]
      },
      editId: this.$route.query.editId,
      studentRadio: 0,
      value1: [],
      section_id: '',
      sectionList: [],
      oldClass: {}, // 未处理的班级
      oldsection: {}, // 未处理的年段
      editClass_id: [],
      editsection_id: [],
      studentVisible: false,
      dynamicTags: [],
      dynamicClassTags: [],
      dynamicTagsArray: {},
      visibleType: 0,
      editBody: null
    }
  },
  watch: {
    '$route'(to, from) {
      if (!this.$route.query.editId) {
        this.editId = ''
        this.infoForm.title = ''
        this.infoForm.body = ''
      }
    },
    'studentRadio'() {
      console.log('变了学生')
      this.dynamicTags = []
    },
    'infoForm.type'() {
      console.log('变了方式')
      this.dynamicTags = []
      this.dynamicClassTags = []
      this.dynamicTagsArray = {}
      this.studentRadio = 0
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  created() {
    this.sectionListFn()
  },
  mounted() {
    // 初始化
    console.log('初始化', this.editId)
    if (this.editId) {
      this.Inint()
    }
  },
  methods: {
    Inint() {
      this.$fetch(api.admin_notice_detail, {id: this.editId}).then((response) => {
        if (response.code === 0) {
          this.infoForm.title = response.vo.title
          this.infoForm.body = response.vo.body
          this.infoForm.type = response.vo.type
          this.infoForm.class_id = response.vo.class_id
          // 0全校 1特定年段 2特定班级
          if (response.vo.type === 1) {
            this.editsection_id = response.vo.section_id
          } else if (response.vo.type === 2) {
            this.editClass_id = response.vo.class_id
          }
          this.editBody = response.vo
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onEditorReady(editor) {
    },
    backlist() {
      this.$router.go(-1)
    },
    onSubmit() {
      let dataOption = JSON.parse(JSON.stringify(this.infoForm))
      console.log('dataFrom:', dataOption)
      if (!dataOption.title) {
        this.$message.error('请填写通知标题')
        return
      }
      if (Number(dataOption.type) === 1 && !this.value1.length) {
        this.$message.error('请选择特定年段')
        return
      }
      if (Number(dataOption.type) === 2 && !this.dynamicClassTags.length) {
        this.$message.error('请选择特定班级')
        return
      }
      if (this.studentRadio === 1 && !this.dynamicTags.length) {
        this.$message.error('请选择特定学生')
        return
      }
      if (!dataOption.body) {
        this.$message.error('请填写通知内容')
        return
      }
      let a = []
      for (let item of this.dynamicClassTags) {
        a.push(item.id)
      }
      let b = []
      for (let item of this.dynamicTags) {
        b.push(item.id)
      }
      dataOption.class_id = a.join(',')
      dataOption.section_id = this.value1.join(',')
      dataOption.student_id = b.join(',')
      console.log('dataFrom:', dataOption)
      // let status = 1
      // if(status){
      //   return
      // }
      this.$post(api.admin_notice_add, dataOption).then(res => {
        if (!res.code) {
          this.$message.success(res.msg)
          this.infoForm = {
            title: '',
            class_id: '',
            section_id: '',
            body: '',
            type: '0',
            time: yeartime(new Date()),
            student_id: 0
          }
          this.studentRadio = 0
          this.dynamicTags = []
          this.dynamicTagsArray = {}
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    sectionListFn() {
      this.$post(api.admin_section_index, {
        p: this.page.pageindex
      }).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    staduentchange() {
      if (this.studentRadio === 0) {
        this.infoForm.student_id = 0
      }
    },
    chooseStudent(option) {
      // dynamicClassTags         dynamicTags: [] dynamicClassTags: []
      this.visibleType = option
      let mew_ = {}
      if (option === 1) {
        for (let item of this.dynamicClassTags) {
          mew_[item.id] = item
        }
        this.dynamicTagsArray = JSON.parse(JSON.stringify(mew_))
        this.classVisible = true
      } else {
        for (let item of this.dynamicTags) {
          mew_[item.id] = item
        }
        this.dynamicTagsArray = JSON.parse(JSON.stringify(mew_))
        this.studentVisible = true
      }
    },
    studentFn(option) {
      let list = []
      for (let i in option) {
        list.push(option[i])
      }
      if (this.visibleType === 1) {
        this.dynamicClassTags = JSON.parse(JSON.stringify(list))
      } else {
        this.dynamicTags = JSON.parse(JSON.stringify(list))
      }
    },
    handleClose(index, type) {
      if (type === 1) {
        this.dynamicClassTags.splice(index, 1)
      } else {
        this.dynamicTags.splice(index, 1)
      }
    },
    priveContent() {
      this.contentVisible = true
    }
  }
}
</script>
